<template>
    <div
      :id="`tab_` + tab.id"
      class="frame-tab"
      :class="{
        'frame-tab-active': tab.show,
        'frame-tab-home': tab.isHome,
        'frame-tab-hover': hover,
      }"
      @click="$emit('jump', tab)"
    >
      <div class="frame-tab-inner">
        <span class="frame-tab-icon-wrap">
          <base-spin size="small" v-if="tab.loading"></base-spin>
          <template v-else>
            <span class="point"></span>
            <i
              class="iconfont icon-updete frame-tab-reload"
              @click="reload"
            ></i>
          </template>
        </span>
        <span ref="titleRef" class="frame-tab-name">{{ tab.title }}</span>
        <button
          class="base-btn base-btn--icon base-btn--circle frame-tab-close"
          @click.stop="$emit('close', tab)"
          v-if="tab.closeable"
        >
          <i class="iconfont icon-close"></i>
        </button>
      </div>
      <div class="frame-tab__divider"></div>
    </div>
</template>

<script>
import {
  defineComponent,
  ref,
  computed,
  onMounted,
  onUnmounted,
} from 'vue';
import { safeNewDate } from '@src/util/time';

// ie 显示bug
export default defineComponent({
  name: 'frame-tab',
  props: {
    tab: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    const titleRef = ref(); // 标题ref
    const timer = ref(null); // 定时器
    const hover = ref(false); // 是否可以hover

    function clearTimer() {
      if (!timer.value) {
        clearInterval(timer.value);
        timer.value = null;
      }
    }
    // 检查时间
    function checkTime() {
      timer.value = setInterval(() => {
        if (safeNewDate() - props.tab.timeStamp >= 5000) {
          hover.value = true;
          clearTimer();
        }
      }, 1000);
    }

    function reload() {
      hover.value = false;
      checkTime();
      emit('reload', props.tab);
    }

    // 是否是外部链接
    const isExternalLinks = computed(() => {
      if (/^([a-z][a-z\d+\-.]*:)?\/\//i.test(props.tab.currentUrl)) {
        return true;
      }
      return false;
    });

    onMounted(() => {
      checkTime();
    });

    onUnmounted(() => {
      clearTimer();
    });

    return {
      titleRef,
      hover,
      isExternalLinks,
      reload,
    };
  },
});
</script>

<style lang="scss">
.frame-tab {
  --bg-color: white;
  --horn-width: 7px;
  --color: #595959;

  position: relative;
  padding: 0 10px;
  margin: 0 var(--horn-width);
  min-width: 70px;
  max-width: 180px;
  height: 100%;
  display: inline-block;
  border-radius: 8px 8px 0 0;
  background: var(--bg-color);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  vertical-align: bottom;

  &::before {
    content: '';
    position: absolute;
    width: var(--horn-width);
    height: var(--horn-width);
    left: calc(-1 * var(--horn-width));
    bottom: 0;
    background: transparent;
    background: radial-gradient(
      circle at 0 0,
      transparent var(--horn-width),
      var(--bg-color) 0px
    );
  }
  &::after {
    content: '';
    position: absolute;
    width: var(--horn-width);
    height: var(--horn-width);
    right: calc(-1 * var(--horn-width));
    bottom: 0;
    background: transparent;
    background: radial-gradient(
      circle at 100% 0,
      transparent var(--horn-width),
      var(--bg-color) 0
    );
  }

  // hover 颜色
  &:hover {
    --bg-color: rgba(244, 246, 248, 0.5);
  }

  // active 颜色
  &.frame-tab-active {
    --bg-color: #{$bg-color-main};
    --color: #{$color-primary};
    &:hover {
      i {
        color: $color-primary;
      }
    }
  }

  // hover active 当前标签左右的分割线都不显示
  &:hover,
  &.frame-tab-active {
    .frame-tab__divider,
    & + .frame-tab .frame-tab__divider {
      opacity: 0;
    }
  }

  .frame-tab-inner {
    position: relative;
    height: 42px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    transition: all ease 0.3s;

    .frame-tab-icon-wrap {
      display: block;
      margin-right: 2px;
      height: 14px;
      width: 14px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        color: $color-primary;
      }

      .base-spin {
        display: block;
      }

      .point {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color);
      }

      .frame-tab-reload {
        cursor: pointer;
        font-size: 16px;
        display: none;
      }
    }

    .frame-tab-name {
      color: var(--color);
      @include text-ellipsis();
    }

    .frame-tab-icon {
      display: block;
      color: #757575;
      font-size: 16px;
    }

    .frame-tab-close {
      margin: 0 -4px 0 6px;
      color: var(--color);
    }
  }

  &.frame-tab-hover:hover {
    .frame-tab-reload {
      display: block;
    }

    .frame-tab-icon {
      display: none;
    }
  }
  &:not(:first-of-type) {
    .frame-tab__divider {
      position: absolute;
      left: calc(var(--horn-width) * -1);
      content: '';
      width: 1px;
      height: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: #e8e8e8;
      transition: opacity 0.3s;
    }
  }
}
</style>
